enyo.kind({
	name: "hpit.Divider",
	kind: enyo.Control,
	published: {
		caption: "",
		collapsable: false,
		isExpanded: false,
		checkable: false,
		isChecked: false
	},
	events: {
		onCheckChange: "",
		onCollapseChange: ""
	},
	classes: "hpit-divider",
	components: [
		{tag: "div", name: "header", classes:"header", components: [
			{tag: "div", classes: "caption", name: "caption"},
			{tag: "div", name: "checkContainer", classes: "check-container", components: [
				{tag: "div", name: "checkBoxIcon", classes: "unchecked", ontap: "checkTap"}
			]},
			{tag: "div", name: "collapseContainer", classes: "collapse-container", components: [
				{tag: "div", name: "collapseIcon", classes: "collapsed", ontap: "collapseTap"}
			]},
			{tag: "div", classes: "line", components: [
				{tag: "hr"}
			]}
		]},
		{tag: "div", name: "client", classes: "content"}
	],
	
	create: function() {
		this.inherited(arguments);
		this.captionChanged();
		
		//show hide the cpllapse button
		if(this.collapsable) {
			this.$.collapseContainer.setShowing(true);
			
			//set the default cpllapse
			this.expandedChanged();
		} else {
			this.$.collapseContainer.setShowing(false);
			this.$.client.setShowing(false);
		}
		
		//show hide the checkbox
		if(this.checkable) {
			this.$.checkContainer.setShowing(true);
			
			//set the default check
			this.checkedChanged();
		} else {
			this.$.checkContainer.setShowing(false);
		}
	},
	
	captionChanged: function() {
		this.$.caption.setContent(this.caption);
	},
	
	expandedChanged: function() {
		if(this.isExpanded) {
			this.$.collapseIcon.setClasses("expanded");
			this.$.client.setShowing(true);
		} else {
			this.$.collapseIcon.setClasses("collapsed");
			this.$.client.setShowing(false);
		}
	},
	
	checkedChanged: function() {
		if(this.isChecked) {
			this.$.checkBoxIcon.setClasses("checked");
		} else {
			this.$.checkBoxIcon.setClasses("unchecked");
		}
	},
	
	collapseTap: function() {
		this.isExpanded = !this.isExpanded;
		this.expandedChanged();
		this.doCollapseChange();
	},
	
	checkTap: function() {
		this.isChecked = ! this.isChecked;
		this.checkedChanged();
		this.doCheckChange();
	},
	
	setCaption: function(caption) {
		this.$.caption.setContent(caption);
		this.$.caption.render();
	},
	
	setChecked: function(isChected){
		this.isChecked = isChected;
		if(this.isChecked) {
			this.$.checkBoxIcon.setClasses("checked");
		} else {
			this.$.checkBoxIcon.setClasses("unchecked");
		}
	}
});